<template>
    <div class="app-container operateInfo">
        <div class="stationTags1">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="充电监控" name="first"></el-tab-pane>
                <el-tab-pane label="故障记录" name="second"></el-tab-pane>
                <el-tab-pane label="桩离线监控" name="third"></el-tab-pane>
                <el-tab-pane label="流量卡监控" name="fourth"></el-tab-pane>
            </el-tabs>
            <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                        v-hasPermi="['business:chargeStation:add']">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                        @click="handleUpdate" v-hasPermi="['business:chargeStation:edit']">修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                        @click="handleDelete" v-hasPermi="['business:chargeStation:remove']">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                        v-hasPermi="['business:chargeStation:export']">导出</el-button>
                </el-col> -->
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
        </div>

        <el-row :gutter="10" class="mb8" v-if="activeName == 'first'">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="90px">
                <el-form-item label="充电站名称" prop="stationName">
                    <el-input v-model="queryParams.stationName" placeholder="请输入充电站名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-col :span="24" class="stationTags">
                <el-tabs v-model="activeNumberName" type="card" @tab-click="handleNumberClick">
                    <el-tab-pane :label="`枪总数(${total})`" name="totalNumber"></el-tab-pane>
                    <el-tab-pane :label="`待机(${total})`" name="standbyNumber"></el-tab-pane>
                    <el-tab-pane :label="`充电(${total})`" name="chargeNumber"></el-tab-pane>
                    <el-tab-pane :label="`从枪(${total})`" name="gunNumber"></el-tab-pane>
                    <el-tab-pane :label="`完成(${total})`" name="completeNumber"></el-tab-pane>
                    <el-tab-pane :label="`预占(${total})`" name="preemptNumber"></el-tab-pane>
                    <el-tab-pane :label="`离线(${total})`" name="offlineNumber"></el-tab-pane>
                    <el-tab-pane :label="`故障(${total})`" name="faultNumber"></el-tab-pane>
                </el-tabs>
                <el-row>
                    <el-button round type="primary" @click="handleTypeClick('table')"><i class="el-icon-s-fold"></i>
                        列表</el-button>
                    <el-button round type="success" @click="handleDynamicSwitching()"
                        v-if="activeTypeName == 'matrix' && !isDynamicSwitching"><i class="el-icon-s-operation"></i>
                        动态</el-button>
                    <el-button round type="danger" @click="handleStopDynamicSwitching()"
                        v-if="activeTypeName == 'matrix' && isDynamicSwitching"><i class="el-icon-remove-outline"></i>
                        停止</el-button>
                    <el-button round type="info" @click="handleTypeClick('matrix')"><i class="el-icon-menu"></i>
                        卡片</el-button>
                </el-row>
            </el-col>
            <el-col :span="24" v-if="activeTypeName == 'table'">
                <el-table v-loading="loading" :data="chargeStationList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="充电站名称" align="center" prop="stationName" />
                    <el-table-column label="充电站地理位置" align="center" prop="stationAddr" :show-overflow-tooltip="true" />
                    <el-table-column label="充电站状态" align="center" prop="stationStatus">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.charge_station_status" :value="scope.row.stationStatus"
                                :show-overflow-tooltip="true" />
                        </template>
                    </el-table-column>
                    <el-table-column label="充电桩数量" align="center" prop="stakeNumber" />
                    <el-table-column label="开放时间" align="center" prop="openingHours" />
                    <el-table-column label="停车费用" align="center" prop="parkingFees" />
                    <el-table-column label="电站设施" align="center" prop="stationFacilities" />
                    <el-table-column label="充电站位置" align="center" prop="stationPosition">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.charge_station_position" :value="scope.row.stationPosition" />
                        </template>
                    </el-table-column>
                    <el-table-column label="服务热线" align="center" prop="serviceHotline" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-tickets"
                                @click="handleStationDetail(scope.row)">电站详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

            <el-col :span="24" v-if="activeTypeName == 'matrix'">
                <el-scrollbar style="height: 600px;" wrap-style="overflow-x: hidden">
                    <StationGun :chargeStationList="chargeStationList" ref="stationGun" />
                </el-scrollbar>
            </el-col>
            <el-col :span="24" v-if="activeTypeName !== 'map'">
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8" v-if="activeName == 'second'">
            <!-- <el-col :span="24">
                <el-tabs v-model="activeAlarmName" @tab-click="handleAlarmClick">
                    <el-tab-pane :label="`总数(${total})`" name="alarmTotal"></el-tab-pane>
                    <el-tab-pane :label="`提示(${total})`" name="alarmPrompt"></el-tab-pane>
                    <el-tab-pane :label="`一般(${total})`" name="alarmGeneral"></el-tab-pane>
                    <el-tab-pane :label="`严重(${total})`" name="alarmSerious"></el-tab-pane>
                </el-tabs>
            </el-col> -->
            <el-col :span="24">
                <FaultRecord />
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8" v-if="activeName == 'third'">
            <el-col :span="24">
                <OfflineMonitoring />
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8" v-if="activeName == 'fourth'">
            <el-col :span="24">
                <TraffiCcardMonitoring />
            </el-col>
        </el-row>




        <!-- 添加或修改充电站信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="充电站名称" prop="stationName">
                            <el-input v-model="form.stationName" placeholder="请输入充电站名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地理位置" prop="stationAddr">
                            <el-input v-model="form.stationAddr" placeholder="请输入充电站地理位置" />
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站状态" prop="stationStatus">
                            <el-select v-model="form.stationStatus" placeholder="请选择电站状态" style="width: 100%;"
                                filterable clearable>
                                <el-option v-for="dict in dict.type.charge_station_status" :key="dict.value"
                                    :label="dict.label" :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="停车费用" prop="parkingFees">
                            <el-input v-model="form.parkingFees" placeholder="请输入停车费用" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站设施" prop="stationFacilities">
                            <el-input v-model="form.stationFacilities" placeholder="请输入电站设施" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站位置" prop="stationPosition">
                            <el-select v-model="form.stationPosition" placeholder="请选择电站位置" style="width: 100%;"
                                filterable clearable>
                                <el-option v-for="dict in dict.type.charge_station_position" :key="dict.value"
                                    :label="dict.label" :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务热线" prop="serviceHotline">
                            <el-input v-model="form.serviceHotline" placeholder="请输入服务热线" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { listchargeStation, getchargeStation, delchargeStation, addchargeStation, updatechargeStation } from "@/api/business/chargeStation"
import OperateCard from "@/components/OperationCard"
import MapContainer from "@/components/MapContainer"
import StationGun from "@/components/StationGun"
// 故障记录
import FaultRecord from "./faultRecord.vue"
// 充电桩离线监控
import OfflineMonitoring from "./offlineMonitoring.vue"
// 流量卡监控
import TraffiCcardMonitoring from "./traffiCcardMonitoring.vue"
export default {
    name: "chargeStation",
    dicts: ['charge_station_status', 'charge_station_level', 'charge_station_position'],
    components: { OperateCard, MapContainer, StationGun, FaultRecord, OfflineMonitoring, TraffiCcardMonitoring },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 充电站信息表格数据
            chargeStationList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 显示充电桩弹出层
            openStake: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                stationName: null,
                stationAddr: null,
                stationStatus: null,
                stakeNumber: null,
                openingHours: null,
                operaManagement: null,
                parkingFees: null,
                stationFacilities: null,
                stationPosition: null,
                stationLevel: null,
                serviceHotline: null,
                stationImg: null,
                params: {
                    centerLat: '000'
                }
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                stationName: [
                    { required: true, message: "充电站名称不能为空", trigger: "blur" }
                ],
                stationAddr: [
                    { required: true, message: "充电站地理位置不能为空", trigger: "blur" }
                ],
                stationStatus: [
                    { required: true, message: "充电站状态(开放中、停用)不能为空", trigger: "change" }
                ],
                stakeNumber: [
                    { required: true, message: "充电站下充电桩数量不能为空", trigger: "blur" }
                ],
                openingHours: [
                    { required: true, message: "开放时间不能为空", trigger: "blur" }
                ],
                operaManagement: [
                    { required: true, message: "运营管理不能为空", trigger: "blur" }
                ],
                parkingFees: [
                    { required: true, message: "停车费用不能为空", trigger: "blur" }
                ],
                stationFacilities: [
                    { required: true, message: "电站设施不能为空", trigger: "blur" }
                ],
                stationPosition: [
                    { required: true, message: "电站位置不能为空", trigger: "blur" }
                ],
                stationLevel: [
                    { required: true, message: "站点等级不能为空", trigger: "blur" }
                ],
                serviceHotline: [
                    { required: true, message: "服务热线不能为空", trigger: "blur" }
                ],
                stationImg: [
                    { required: true, message: "站点图片不能为空", trigger: "blur" }
                ],
                createTime: [
                    { required: true, message: "创建时间不能为空", trigger: "blur" }
                ]
            },
            // 头部标签页
            activeName: 'first',
            // 电站信息数量标签
            activeNumberName: 'totalNumber',
            // 数据展示类型（表格、地图、矩阵）
            activeTypeName: 'matrix',
            // 报警信息类型标签
            activeAlarmName: 'alarmTotal',
            // 是否动态展示充电枪信息
            isDynamicSwitching: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询充电站信息列表 */
        getList() {
            this.loading = true
            listchargeStation(this.queryParams).then(response => {
                this.chargeStationList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        // tabs标签页点击切换事件(电站信息、报警信息)
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 电站信息数量标签点击切换事件（总数、正常、离线、警告、接入中）
        handleNumberClick(tab, event) {
            switch (tab.name) {
                case "totalNumber":
                    this.getList()
                    break
                case "standbyNumber":
                    this.getList()
                    break
                case "chargeNumber":
                    this.getList()
                    break
                case "gunNumber":
                    this.getList()
                    break
                case "completeNumber":
                    this.getList()
                    break
                case "preemptNumber":
                    this.getList()
                    break
                case "offlineNumber":
                    this.getList()
                    break
                case "faultNumber":
                    this.getList()
                    break
                default:
                    break
            }
        },
        // 数据展示风格标签点击事件（表格、地图、矩阵）
        handleTypeClick(type) {
            this.activeTypeName = type;
        },
        // 报警信息-报警类型标签点击事件（总数、提示、一般、严重）
        handleAlarmClick(tab, event) {
            switch (tab.name) {
                case "alarmTotal":
                    this.getList()
                    break
                case "alarmPrompt":
                    this.getList()
                    break
                case "alarmGeneral":
                    this.getList()
                    break
                case "alarmSerious":
                    this.getList()
                    break
                default:
                    break
            }
        },
        // 电站详情
        handleStationDetail(row) {

        },
        // 动态切换充电枪信息
        handleDynamicSwitching() {
            this.isDynamicSwitching = true;
            this.$refs.stationGun.dynamicSwitching();
        },
        // 停止切换充电枪信息
        handleStopDynamicSwitching() {
            this.isDynamicSwitching = false;
            this.$refs.stationGun.stopDynamicSwitching();
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                stationId: null,
                stationName: null,
                stationAddr: null,
                stationStatus: null,
                stakeNumber: null,
                openingHours: null,
                operaManagement: null,
                parkingFees: null,
                stationFacilities: null,
                stationPosition: null,
                stationLevel: null,
                serviceHotline: null,
                stationImg: null,
                updateTime: null,
                createTime: null
            }
            this.resetForm("form")
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.stationId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = "添加充电站信息"
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const stationId = row.stationId || this.ids
            getchargeStation(stationId).then(response => {
                this.form = response.data;
                this.form.stationStatus = this.form.stationStatus + ''
                this.form.stationLevel = this.form.stationLevel + ''
                this.form.stationPosition = this.form.stationPosition + ''
                this.open = true
                this.title = "修改充电站信息"
            })
        },
        handleStake(row) {
            // const stationIds = row.stationId || this.ids;
            this.stationId = row.stationId || this.ids;
            this.openStake = true;
            // this.$router.push({ path: '/business/chargeStation/stake/index', query: { stationId: stationIds } })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.stationId != null) {
                        updatechargeStation(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功")
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addchargeStation(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功")
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const stationIds = row.stationId || this.ids
            this.$modal.confirm('是否确认删除充电站信息编号为"' + stationIds + '"的数据项？').then(function () {
                return delchargeStation(stationIds)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("删除成功")
            }).catch(() => { })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('business/chargeStation/export', {
                ...this.queryParams
            }, `chargeStation_${new Date().getTime()}.xlsx`)
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .operateInfo .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100%+10px);
    /* 多出来的10px是横向滚动条默认的样式 */
}

.stationTags1 {
    display: flex;
    justify-content: space-between;
}

.stationTags {
    display: flex;
    justify-content: space-between;


    /* 修改 Tabs 标签页的圆角 */
    ::v-deep.el-tabs__item {
        border-radius: 20px;
        border: 1px solid #dfe4ed;
        /* 设置你想要的圆角大小 */
    }

    ::v-deep.el-tabs--card>.el-tabs__header {
        border: none;
    }

    ::v-deep.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
        border-bottom-color: none;
        background-color: #1890ff;
        color: #fff;
    }

    ::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
        border: none;
    }
}
</style>
